<template>
    <div style="max-width: 960px;margin: 0 auto;">
        <Header></Header>
        <div>
            <el-container>
                <el-header style="background-color: #409EFF;color: #FFFFFF">
                    <div style="font-size: large">{{this.span === "0" ? '找回密码' : this.span === "1" ? '注册' : '修改手机号'}}-基本信息</div>
                </el-header>
                <el-main>

                    <el-form style="border-radius: 4px" :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                        <el-row :gutter="70">
                            <el-col :span="12"><div class="grid-content bg-purple">
                                <el-form-item label="统一信用代码" prop="orgId">
                                    <el-input type="text" placeholder="请输入统一信用代码" v-model="ruleForm.orgId"/>
                                </el-form-item>
                            </div></el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="机构名称" prop="orgName">
                                        <el-input type="text" placeholder="请输入机构名称" v-model="ruleForm.orgName"/>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row :gutter="70">
                            <el-col :span="12"><div class="grid-content bg-purple">
                                <el-form-item label="法定代表人" prop="legalName">
                                    <el-input type="text" placeholder="请输入账号" v-model="ruleForm.legalName"/>
                                </el-form-item>
                            </div></el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="法定代表人证件号" prop="legalIdcard">
                                        <el-input type="text" placeholder="请输入账号" v-model="ruleForm.legalIdcard"/>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row :gutter="70">
                            <el-col :span="12"><div class="grid-content bg-purple">
                                <el-form-item label="注册地址" prop="orgAddr">
                                    <el-input type="text" placeholder="请输入账号" v-model="ruleForm.orgAddr"/>
                                </el-form-item>
                            </div></el-col>
                        </el-row>
                        <el-form-item>
                            <el-button style="margin-top: 20px;width: 100px;float: right" type="primary" v-on:click="onSubmit('ruleForm')">验证</el-button>
                        </el-form-item>
                        <el-form-item style="text-align: left;" v-show="isShow">
                            <h4>若确认企业基本信息填写无误，请前往<div style="color: #409EFF; display: inline-block;cursor:pointer" @click="update()">企业基本信息更新服务</div>更新企业基本信息，完成用户注册。</h4>
                        </el-form-item>

                    </el-form>
                </el-main>
            </el-container>
        </div>
    </div>
</template>

<script>
    import Header from "../../components/Header";
    import {orgValid} from '../../api/userMG'
    export default {
        components: {Header},
        name: "Auth",
        data() {
            return {
                isShow: false,
                span: window.localStorage.opCode,
                ruleForm: {
                    orgId: '',
                    orgName: '',
                    legalName: '',
                    legalIdcard: '',
                    orgAddr: ''
                },
                rules: {
                    orgId: [
                        { required: true, message: '请输入统一信用代码', trigger: 'blur' },
                        { min: 18, max: 18, message: '统一信用代码格式不正确', trigger: 'blur' }
                    ],
                    orgName: [
                        { required: true, message: '请输入机构名称', trigger: 'blur' }
                    ],
                    legalName: [
                        { required: true, message: '请输入法人姓名', trigger: 'blur' }
                    ],
                    legalIdcard: [
                        { required: true, message: '请输入法人证件号码', trigger: 'blur' },
                        { min: 18, max: 18, message: '证件号码格式不正确', trigger: 'blur' }
                    ],
                    orgAddr: [
                        { required: true, message: '请输入注册地址', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            toggle:function(){
                this.isShow = !this.isShow;
            },
            onSubmit(ruleForm){
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        const _this = this;
                        console.log("_this.ruleForm.legalIdcard",_this.ruleForm.legalIdcard);
                        console.log("_this.ruleForm",_this.ruleForm);
                        this.isShow = true;
                        orgValid(_this.ruleForm).then(res=> {
                            console.log("res => ",res);
                            console.log("_this.$route.params.opCode => ",_this.$route.params.opCode);
                            //opCode=> 0 找回密码; 1 注册; 2 修改手机号
                            if (res.code === 200) {
                                if (window.localStorage.opCode === "0"){
                                    _this.$router.push({name:"GetPassword"});
                                    console.log("===========window.localStorage.opCode===========");
                                    console.log(window.localStorage.opCode);
                                }
                                else if (window.localStorage.opCode === "1"){
                                    console.log("orgId => ",res.data.orgId);
                                    window.localStorage.orgId = res.data.orgId;
                                    _this.$router.push({name:"Register"});
                                    console.log("===========window.localStorage.opCode===========");
                                    console.log(window.localStorage.opCode);
                                }
                                else if (window.localStorage.opCode === "2"){
                                    console.log("orgId => ",res.data.orgId);
                                    window.localStorage.orgId = res.data.orgId;
                                    _this.$router.push({name:"UpdateMobile"})
                                }
                            } else {
                                this.isShow = true;
                                _this.$message.error('失败！');
                            }
                        });
                    }
                  else {
                        return;
                    }
                 });
    },
            update(){
                this.$router.push("UpdateOrg")
            },
        }
    }
</script>

<style scoped>

    .el-header{
        background-color: #B3C0D1;
        color: #333;
        text-align: left;
        line-height: 60px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
    .el-divider {
        background-color: #606266;
    }

    .mlogo {
        height: 60%;
        margin-top: 10px;
    }

    .demo-ruleForm {
        width: 770px;
        margin: 0 auto;
    }

    a {
        text-decoration: none;
        font-size: 14px;
        width: auto;
    }

</style>